<template>
    <div class="map">
        <div id="allmap"></div>
    </div>
</template>
<script>
import {MP} from '../../../../static/js/map.js'
import gcoord from 'gcoord'
import bus from '../bus';
export default {
    props: ['ToExamine'],
    data() {
      return {
        MapPoint:[],
        ConversionData:[],
        TableData:[],
        gisData:[],
        MapPointInfo:[],
        concatData:[],
        SelectedToggle:false,
        Identical:false,
        OnePoint:[],
        Oneinfo:'',
        infoPointState:false,
        repeatDataOne:[],
        repeatDataTwo:[],
        getZoom:17,
        getZoomInfo:17,
        Okstate:false,
      }
    },
    methods:{
      MergeData(){
        // if (!Array.prototype.hasOwnProperty("last")) {
        //   Object.defineProperty(Array.prototype, "last", {
        //     get: function() {
        //       return this[this.length - 1];
        //     }
        //   });
        // }
        this.concatData=this.ConversionData.concat(this.gisData);
        if(this.concatData!=''){
          this.skMap(this.concatData,this.MapPoint,this.getZoom,this.$route.path);  
        }else{
          this.shopMAp();
          bus.$emit('TableInfo', this.concatData);
        }
				bus.$emit('selectedInfo', this.concatData);
        // this.concatData=this.ConversionData.concat(this.TableData);
        // let popData=this.concatData[this.concatData.length - 1];
        // if(popData!=undefined){
        //   switch (popData.type)
        //   {
        //     case 'Point':this.MapPoint=[popData.Point[0],popData.Point[1]];
        //     break;
        //     case 'MultiLineString':this.MapPoint=[popData.Point[0][0][0],popData.Point[0][0][1]];
        //     break;
        //     case 'MultiPolygon':this.MapPoint=[popData.Point[0][0][0][0],popData.Point[0][0][0][1]];
        //     break;
        //   }
        //   this.skMap(this.concatData,this.MapPoint);  
        // }else{
        //   this.shopMAp();
        // }
      },
      //调用百度地图初始化
      shopMAp(){
        this.$nextTick(function () {
          MP("WGisSYWHrFFynEUtR8sihaVluQ6ERp8R").then( BMap => {
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(114.02597366,22.54605355);
            map.centerAndZoom(point,12);
            map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            map.disableDoubleClickZoom();  //禁用双击放大
            //创建图标
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);  
            //地图加载完毕
            map.addEventListener("tilesloaded",function(){
            bus.$emit('load', false);//地图加载完成后
            });
          })
        })
      },
      //调用百度地图数据加载
      skMap(ConversionData,MapPoint,getZoom,Urlpath){
        var _this=this;
        this.$nextTick(function () {
          MP("WGisSYWHrFFynEUtR8sihaVluQ6ERp8R").then( BMap => {
            //创建地图函数
            function createMap(){
              var map = new BMap.Map("allmap");
              var point = new BMap.Point(MapPoint[0], MapPoint[1]);
              map.centerAndZoom(point,getZoom);
              map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
              map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
              window.map = map;//将map变量存储在全局 
            }
            //地图事件设置函数
            function setMapEvent(){
              var opts = {
              width : 250,     // 信息窗口宽度
              height: 100,     // 信息窗口高度
              title : "信息窗口" , // 信息窗口标题
              enableMessage:true//设置允许信息窗发送短息
              };

              if(ConversionData!=undefined&&ConversionData!=[]){
                for(let i=0;i<ConversionData.length;i++){
                  if(ConversionData[i].type=='Point'){ 
                    var pt = new BMap.Point(ConversionData[i].Point[0],ConversionData[i].Point[1]);
                    var marker = new BMap.Marker(pt); 
                    map.addOverlay(marker); //创建点
                    addToggleHandler(marker,ConversionData[i].type);
                    addClickHandler(marker,ConversionData[i].type,ConversionData[i]) //左键
                    if(ConversionData[i].ColorProperty!=106000){
                      RightClickHandler(marker,ConversionData[i]); //右键菜单
                    }
                  }else if(ConversionData[i].type=='MultiLineString'){
                    var polylinePointsArrays = []; 
                    if(ConversionData[i].Point.length!=0){
                      for(let k=0;k<ConversionData[i].Point[0].length;k++){
                        polylinePointsArrays.push(new BMap.Point(ConversionData[i].Point[0][k][0],ConversionData[i].Point[0][k][1])); 
                      }
                    }
                    var polyline = new BMap.Polyline(polylinePointsArrays, {strokeColor:ColorContrast(ConversionData[i].ColorProperty), strokeWeight:2, strokeOpacity:0.5}); 
                    map.addOverlay(polyline); //创建折线
                    addToggleHandler(polyline,ConversionData[i].type);
                    addClickHandler(polyline,ConversionData[i].type,ConversionData[i]) //左键
                    if(ConversionData[i].ColorProperty!=106000){
                      RightClickHandler(polyline,ConversionData[i]); //右键菜单
                    }
                  }else if(ConversionData[i].type=='Polygon'){
                    var polylinePointsArrays = []; 
                    if(ConversionData[i].Point.length!=0){
                      for(let k=0;k<ConversionData[i].Point[0].length;k++){
                        polylinePointsArrays.push(new BMap.Point(ConversionData[i].Point[0][k][0],ConversionData[i].Point[0][k][1])); 
                      }
                    }
                    var polyline = new BMap.Polygon(polylinePointsArrays, {strokeColor:ColorContrast(ConversionData[i].ColorProperty), strokeWeight:2, strokeOpacity:0.5}); 
                    map.addOverlay(polyline); //创建面
                    addToggleHandler(polyline,ConversionData[i].type);
                    addClickHandler(polyline,ConversionData[i].type,ConversionData[i]) //左键
                    if(ConversionData[i].ColorProperty!=106000){
                      RightClickHandler(polyline,ConversionData[i]); //右键菜单
                    }
                  }else if(ConversionData[i].type=='LineString'){
                    var polylinePointsArrays = []; 
                    if(ConversionData[i].Point.length!=0){
                      for(let k=0;k<ConversionData[i].Point.length;k++){
                        polylinePointsArrays.push(new BMap.Point(ConversionData[i].Point[k][0],ConversionData[i].Point[k][1])); 
                      }
                    }
                    var polyline = new BMap.Polygon(polylinePointsArrays, {strokeColor:ColorContrast(ConversionData[i].ColorProperty), strokeWeight:2, strokeOpacity:0.5}); 
                    map.addOverlay(polyline); //创建面
                    addToggleHandler(polyline,ConversionData[i].type);
                    addClickHandler(polyline,ConversionData[i].type,ConversionData[i]) //左键
                    if(ConversionData[i].ColorProperty!=106000){
                      RightClickHandler(polyline,ConversionData[i]); //右键菜单
                    }
                  }else{  
                    var polylinePointsArray = []; 
                    if(ConversionData[i].Point.length!=0){
                      if(ConversionData[i].Point[0][0].length!=0){
                        for(let j=0;j<ConversionData[i].Point[0][0].length;j++){
                          polylinePointsArray.push(new BMap.Point(ConversionData[i].Point[0][0][j][0],ConversionData[i].Point[0][0][j][1])); 
                        }
                      }
                    }
                    var polygon = new BMap.Polygon(polylinePointsArray, {strokeColor:ColorContrast(ConversionData[i].ColorProperty), strokeWeight:2, strokeOpacity:0.5}); 
                    map.addOverlay(polygon);  //创建多边形
                    addToggleHandler(polygon,ConversionData[i].type);
                    addClickHandler(polygon,ConversionData[i].type,ConversionData[i]) //左键
                    if(ConversionData[i].ColorProperty!=106000){
                      RightClickHandler(polygon,ConversionData[i]); //右键菜单
                    }
                  }
                }

              //地图移动开始时触发此事件
                map.addEventListener('dragstart',(e)=>{
                  _this.infoPointState=false;
                })
                // //地图更改缩放级别开始时触发触发此事件
                map.addEventListener('zoomstart',(e)=>{
                  _this.infoPointState=false;
                })
                //地图移动结束时触发此事件
                map.addEventListener('moveend',(e)=>{
                  setTimeout(()=>{
                    _this.Identical=false;
                  },1000)
                  BoundsData(map)
                })
                //地图更改缩放级别结束时触发触发此事件
                map.addEventListener('zoomend',(e)=>{
                  var p=e.target;
                  _this.Identical=false;
                  _this.getZoom=p.getZoom();
                  _this.Okstate=true;
                  BoundsData(map)
                })
                function BoundsData(baiduMap){
                  const Bounds=baiduMap.getBounds();// 返回地图可视区域,以地理坐标表示
                   var pointY=gcoord.transform( [Bounds.getSouthWest().lng,Bounds.getSouthWest().lat],gcoord.BD09,gcoord.WebMercator);
                   var pointX=gcoord.transform( [Bounds.getNorthEast().lng,Bounds.getNorthEast().lat],gcoord.BD09,gcoord.WebMercator);
                    let params={
                     	x_min:pointY[0],
                      y_min:pointY[1],
                      x_max:pointX[0],
                      y_max:pointX[1]
                   }
                   if(_this.Identical==false){
                     bus.$emit('BoundsPoint', params,Bounds.getCenter(),_this.getZoom);
                   }
                  //  //获取可视区域列表
                  //  _this.TableData=[];
                  //  for(let i=0;i<ConversionData.length;i++){
                  //    if(Bounds.containsPoint(new BMap.Point(DataContrast(ConversionData[i],ConversionData[i].type)[0],DataContrast(ConversionData[i],ConversionData[i].type)[1]))==true){
                  //      _this.TableData.push(ConversionData[i])
                  //    }
                  //  }
                   bus.$emit('TableInfo', ConversionData);
                   if(_this.OnePoint!=''&&_this.infoPointState==true){infoPoint()}

                }
                BoundsData(map)

                function infoPoint(){
                  var point = new BMap.Point( _this.OnePoint[0],_this.OnePoint[1]);
                  var infoWindow = new BMap.InfoWindow(_this.Oneinfo); 
                  map.openInfoWindow(infoWindow,point); 
                }
                function BoundsTable(){
                  var bodys=document.getElementById('taskTableList').getElementsByTagName('tbody')
                  var PoinTr=bodys[0].children;
                  for(let i=0;i<PoinTr.length;i++){
                    (function(i){
                      PoinTr[i].onclick=function(){
                        var sContent='';
                        if(ConversionData[i].rest!=undefined){
                          sContent="<p style='margin-top:10px'>"+"GIS："+ConversionData[i].rest.gis_id+"</p>"+
                          "<p>"+"层："+ConversionData[i].rest.geo_layer_name+"</p>"+
                          "<p>"+"GIS类型："+ConversionData[i].rest.geo_type+"</p>";
                        }else{
                          sContent='这个没有内容是GIS数据';
                        }
                        _this.infoPointState=true;
                        _this.OnePoint=[DataContrast(ConversionData[i],ConversionData[i].type)[0],DataContrast(ConversionData[i],ConversionData[i].type)[1]];
                        _this.Oneinfo=sContent;
                        initMap(); 
                      }
                    })(i)
                  }
                }
                BoundsTable();
                

               //点击表格行触发信息窗口
                function addToggleHandler(markerInfo,type){
                  //鼠标滑过事件
                  markerInfo.addEventListener("mouseover",function(e){
                    var p=e.target;
                    if(type=='Point'){
                      p.setAnimation(BMAP_ANIMATION_BOUNCE )
                    }else if(type=='MultiLineString'){
                      p.setStrokeWeight(7)
                      p.setStrokeOpacity(1)
                      // p.setStrokeColor(color: String)
                    }else if(type=='MultiPolygon'){
                      p.setStrokeOpacity(1)
                      p.setStrokeWeight(5)
                      p.setFillOpacity(0.8)
                      // p.setFillColor(color: String)
                    }
                  });
                //鼠标移出事件
                  markerInfo.addEventListener("mouseout",function(e){
                    var p=e.target;
                    if(type=='Point'){
                      p.setAnimation(null)
                    }else if(type=='MultiLineString'){
                      p.setStrokeWeight(2)
                      p.setStrokeOpacity(0.5)
                      // p.setStrokeColor(color: String)
                    }else if(type=='MultiPolygon'){
                      p.setStrokeOpacity(0.5)
                      p.setStrokeWeight(2)
                      p.setFillOpacity(0.4)
                      // p.setFillColor(color: String)
                    }
                  });
                }
                //添加点击事件
                function addClickHandler(markers,type,data){
                  markers.addEventListener("click",function(e){
                     if(data.ColorProperty!=106000){
                        let params={
                          id:data.rest.data_id,
                          submitted:true
                        }
                        bus.$emit('LeftJson', params);
                     }
                      var sContent='';
                      if(data.rest!=undefined){
							if(data.logintxt == '/taskModule'){
								sContent="<p style='margin-top:10px'>"+"globalId："+data.rest.gis_id+"</p>"+
								"<p>"+"层："+data.rest.geo_layer_name+"</p>"+
								"<p>"+"GIS类型："+data.rest.geo_type+"</p>"+
								"<p>"+"是否被修改："+data.rest.is_modified+"</p>";
							}else if(data.logintxt == '/TaskReject'){
								sContent="<p style='margin-top:10px'>"+"globalId："+data.rest.gis_id+"</p>"+
								"<p>"+"层："+data.rest.geo_layer_str+"</p>"+
								"<p>"+"GIS类型："+data.rest.geo_type+"</p>"+
								"<p>"+"是否被修改："+data.rest.is_modify+"</p>";
							}else{
								sContent="<p style='margin-top:10px'>"+"globalId："+data.rest.global_id+"</p>"+
								"<p>"+"层："+data.rest.geo_layer_str+"</p>"+
								"<p>"+"操作类型："+data.rest.operate_type_str+"</p>"+
								"<p>"+"GIS类型："+data.rest.gis_class+"</p>"+
								"<p>"+"审核状态："+data.rest.audit_status_str+"</p>"+
								"<p>"+"操作时间："+data.rest.update_time+"</p>";
							}
                      }else{
                        sContent='这个没有内容是GIS数据';
                      }
                     _this.OnePoint=[];
                    openInfo(sContent,e)
						bus.$emit('selectedData', data);
                  });
                }
                function openInfo(sContent,e){
                  var p = e.target;
                  var point = new BMap.Point(e.point.lng, e.point.lat);
                  var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象 
                  map.openInfoWindow(infoWindow,point); //开启信息窗口
                }

                //添加右击事件
                function RightClickHandler(marker,data){
                var addTask=function(e,ee,marker){
                  let params={
                    id:data.rest.data_id,
                    submitted:true
                  }
                  bus.$emit('RightJson', params);
                };
                var removeTask = function(e,ee,marker){
                  let params={
                    id:data.rest.data_id,
                    submitted:false
                  }
                  bus.$emit('RightJson', params);
                };
                //创建右键菜单
                var markerMenu=new BMap.ContextMenu();
                markerMenu.addItem(new BMap.MenuItem(Urlpath=='/AuditModule'?'标记通过':'加入任务列表',addTask.bind(marker)));
                markerMenu.addItem(new BMap.MenuItem(Urlpath=='/AuditModule'?'标记驳回':'移除任务列表',removeTask.bind(marker)));
                marker.addContextMenu(markerMenu);
                }

              //颜色列表
                function ColorContrast(val){
                  var x;
                  switch (val) 
                  { 
                    case 106000:x="blue"; 
                    break; 
                    case 106001:x="red"; 
                    break; 
                    case 106010:x="#FF9900"; 
                    break; 
                    case 106030:x="#800080"; 
                    break; 
                    case 106020:x="#009933"; 
                    break;
										default:
										x="#000000";
                  }
                  return x
                }

                //数据类型对比
                function DataContrast(cont,type){
                  var k=[];
                  switch (type){
                    case 'Point':k=[cont.Point[0],cont.Point[1]];
                    break;
                    case 'MultiLineString':k=[cont.Point[0][1][0],cont.Point[0][1][1]];
                    break;
                    case 'MultiPolygon':k=[cont.Point[0][0][1][0],cont.Point[0][0][1][1]];
                    break;
                  }
                  return k;
                }
              }
            }
            //创建和初始化地图
            function initMap(){
              createMap();//创建地图
              setMapEvent();//设置地图事件
            }
            initMap();

            map.addEventListener("tilesloaded",function(){//地图加载完毕
            bus.$emit('load', false);//地图加载完成后
            });
          })
        })
      },
    },
    mounted() {
      let _this=this;
      bus.$on('Treedata', function (content,points) {
        _this.ConversionData=content;
        _this.MapPoint=points;
        _this.Identical=false;
        _this.infoPointState=false;
        _this.MergeData();
      })
      bus.$on('TreedataInfo', function (content,points,getZoom) {
        _this.gisData=content;
        _this.MapPoint=[points.lng,points.lat];
        _this.getZoom=getZoom;
        _this.Identical=true;
        _this.MergeData();
      })
      // bus.$on('TableData', function (content,data) {
      //   // _this.TableData=content;
      //   // _this.MergeData();
      // })
      this.shopMAp()
    },
}
</script>
<style>
#allmap{
    height: 600px;
    width: 100%;
    border: 1px solid #f3f3f3;
}
</style>
